<script setup>
	import {
		computed,
		ref
	} from 'vue';
	const selectGroup = ref([])
	const goods = ref([{
			id: "10",
			name: "手机",
			price: 1500,
			checked: false
		},
		{
			id: "12",
			name: "电脑",
			price: 5000,
			checked: false
		},
		{
			id: "13",
			name: "薯片",
			price: 4,
			checked: false
		},
		{
			id: "15",
			name: "纸巾",
			price: 1,
			checked: false
		},
	])
	const totalNumber = computed(() => selectGroup.value.length)
	const totalPrice = computed(() => goods.value.filter(item => item.checked).reduce((prev, curr) => prev + curr.price, 0)
	)

	function remove(index) {
		goods.value.splice(index, 1)
	}

	function itemChange(e) {
		selectGroup.value = e.detail.value;
		goods.value.forEach(item => {
			item.checked = selectGroup.value.includes(item.id)
		})
	}
</script>
<template>
	<view class="out">
		<checkbox-group name="" @change="itemChange">
			<view class="item" v-for="(item,index) in goods" :key="item.id">
				<checkbox :value="item.id" :checked="item.checked"></checkbox>
				<text class="title">{{item.name}}</text>
				<text class="price">{{item.price}}元</text>
				<text class="del" @click="remove(index)"> 删除 </text>
			</view>
		</checkbox-group>

		<view class="card">
			<view class="text">选中{{totalNumber}}个产品，总价：{{totalPrice}}元</view>
		</view>

	</view>
</template>
<style lang="scss" scoped>
	.out {
		padding: 10px;

		.item {
			padding: 10px 0;

			.price {
				margin-left: 30px;
			}

			.del {
				color: red;
				margin-left: 30px;
			}
		}

		.card {
			margin-top: 30px;
			border-top: 1px solid #eee;
			padding: 10px;
		}
	}

	.card {}
</style>